<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title {
            color: red;
        }
    </style>
</head>

<body>

    <h1 id="title" class="title">你好</h1>
    <h2 id="hello" class="title">你好</h2>


    <script>
        // 1. 通过id获取标签(常用)
        // const title = document.getElementById("title");
        // const hello = document.getElementById("hello");
        // console.log(title);
        // console.log(hello);

        // 2. 通过class获取标签
        // const allTitle = document.getElementsByClassName("title");
        // console.log(allTitle[0]);

        // 3. 通过标签名获取
        // const allH2 = document.getElementsByTagName("h2");
        // console.log(allH2);

        // 4. 通过选择器获取第一个(常用)
        // const title = document.querySelector("#title");
        // const title = document.querySelector(".title");
        // console.log(title);

        // 5. 通过选择器获取所有（常用）
        // const title = document.querySelectorAll('#title');
        const title = document.querySelectorAll('.title');
        console.log(title);



    </script>

</body>

</html>